<template>
  <el-container>
    <el-aside>
      <div class="title">小龙坎餐饮管理系统</div>
      <div class="nav">
        <navList></navList>
      </div>
    </el-aside>

    <el-container>
      <el-header class="myheader">
        <el-row class="div1">
          <el-col :span="12">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item icon="el-icon-plus">个人中心</el-dropdown-item> -->
              </el-dropdown-menu>
            </el-dropdown>
            <span class="demonstration" @click="outLogin">退出</span>
          </el-col>
        </el-row>
        <div class="div2">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item
              v-for="(item, index) in $route.meta.title"
              :key="index"
              >{{ item }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import navList from "../components/navList";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "",
  components: { navList },
  data() {
    return {
      userName: "",
    };
  },
  methods: {
    outLogin() {
      this.$router.push("/login");
    },
  },
  created() {
    this.userName = sessionStorage.getItem("userName");
    // if (!sessionStorage.getItem("userName")) {
    //   alert("请先登录,再进行操作！");
    //   this.$router.push("/login");
    // }
  },
};
</script>
<style lang="less" scoped>
.main,
.el-container {
  height: 100%;
}
.title {
  background-color: #5886e3;
  // border: 1px solid red;
  color: white;
  padding: 25px;
  box-sizing: border-box;
}

.el-header {
  color: #333;
}

.el-aside {
  background-color: #343f50;
  color: #333;
  text-align: center;
  height: 100%;
}

.el-main {
  color: #333;
}

.el-header {
  color: #333;
}

.el-aside {
  background-color: #343f50;
  color: #333;
  text-align: center;
  height: 100%;
}

.el-main {
  color: #333;
  // text-align: center;
}

.el-dropdown-link {
  color: rgba(163, 159, 159, 0.644);
}
.el-icon-arrow-down {
  font-size: 18px;
}
.el-icon--right {
  margin-right: 10px;
}
.demonstration {
  cursor: pointer;
}
.myheader {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100px !important;
  padding: 20px;
  box-sizing: border-box;
}
.div1 {
  text-align: right;
}
.div2 {
  padding-bottom: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid black;
}
.el-col-12 {
  width: 100%;
}
</style>
